/**
//  * Magento
//  *
//  * NOTICE OF LICENSE
//  *
//  * This source file is subject to the Academic Free License (AFL 3.0)
//  * that is bundled with this package in the file LICENSE_AFL.txt.
//  * It is also available through the world-wide-web at this URL:
//  * http://opensource.org/licenses/afl-3.0.php
//  * If you did not receive a copy of the license and are unable to
//  * obtain it through the world-wide-web, please send an email
//  * to license@magentocommerce.com so we can send you a copy immediately.
//  *
//  * DISCLAIMER
//  *
//  * Do not edit or add to this file if you wish to upgrade Magento to newer
//  * versions in the future. If you wish to customize Magento for your
//  * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    Mage
 * @package     js
 * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
@baseDir: "../"; //default
@gallery-sprite-svg: '../images/sprite-gallery.svg';
@gallery-sprite-png: '../images/sprite-gallery.png';
@gallery-lightbox-offset: 20px;
@gallery-lightbox-border-color: @border-color-base;
@gallery-lightbox-border-width: 1px;
@gallery-overlay-bg: rgba(204, 204, 204, 0.5);
@gallery-close-position-top: 20px;
@gallery-close-position-right: 20px;
@gallery-close-height: 13px;
@gallery-close-width: 13px;
@gallery-control-next-position-right: 20px;
@gallery-control-prev-position-left: 20px;
@gallery-control-width: 29px;
@gallery-control-height: 57px;
@gallery-thumbnails-padding-top: 15px;
@gallery-thumbnails-padding-right: 15px;
@gallery-thumbnails-padding-left: 15px;
@gallery-thumbnails-padding-bottom: 15px;
@gallery-thumbnails-padding: @gallery-thumbnails-padding-top @gallery-thumbnails-padding-right @gallery-thumbnails-padding-bottom @gallery-thumbnails-padding-left;
@gallery-thumb-border-color-active: #ff5f10;
@gallery-thumb-border-width: 1px;
@gallery-thumb-margin-left: 20px;
@gallery-main-img-margin-top: 0;
@gallery-main-img-margin-bottom: @gallery-thumbnails-padding-top + @gallery-thumbnails-padding-bottom + (2 * @gallery-thumb-border-width) + 40px;
@gallery-main-img-margin-left: 20px;
@gallery-main-img-margin-right: 20px;
@gallery-lens-border-color: @border-color-base;
@gallery-lens-border-width: @border-width-base;

@import "../css/source/lib/lib.less";
@import "../css/source/theme.less";

.loading-mask {
    .loading();
    z-index: @loader-overlay-z-index;
    .loader > p {
        display: none;
    }
}

.ui-widget-overlay {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: @gallery-overlay-bg;
    z-index: @loader-overlay-z-index - 1;
}

.zoom.lense {
    position: absolute;
    z-index: 9999;
    overflow: hidden;
    background: @page-bg-color;
    outline: @gallery-lens-border-width solid @gallery-lens-border-color;
    .zoom.inner > img {
        position: absolute;
    }
}

.zoom.lightbox {
    position: fixed;
    height: auto !important;
    width: auto !important;
    left: @gallery-lightbox-offset !important;
    top: @gallery-lightbox-offset !important;
    right: @gallery-lightbox-offset;
    bottom: @gallery-lightbox-offset;
    border: @gallery-lightbox-border-width solid @gallery-lightbox-border-color;
    background-color: @page-bg-color;
    .box-shadow(
        @shadow: 0 5px 5px rgba(0,0,0,0.2)
    );
    z-index: @loader-overlay-z-index;

    .img.photo.container img {
        position: absolute;
        max-width: 100%;
        max-height: 100%;
        margin: auto;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        display: block;
    }

    .ui-dialog-titlebar {
        background-color: @page-bg-color;
    }

    .ui-dialog-titlebar-close {
        position: absolute;
        line-height: 1;
        top: @gallery-close-position-top;
        right: @gallery-close-position-right;
        border: none;
        .icon-image(
            @_icon-image: @gallery-sprite-svg,
            @_icon-image-width: @gallery-close-width,
            @_icon-image-height: @gallery-close-height,
            @_icon-image-position-x: -60px,
            @_icon-image-text-hide: true
        );
        &:before {
            background-image: url(@gallery-sprite-png);
        }
    }

    .gallery.control {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        &.prev,
        &.next {
            position: absolute;
            top: 50%;
            margin-top: -@gallery-control-height;
            .icon-image(
            @_icon-image: @gallery-sprite-svg,
            @_icon-image-width: @gallery-control-width,
            @_icon-image-height: @gallery-control-height);
            &:before {
                background-image: url(@gallery-sprite-png);
            }
        }
        &.prev {
            left: @gallery-control-prev-position-left;
        }
        &.next {
            .icon-sprite-position(
                @_icon-sprite-position-x: 30,
                @_icon-sprite-grid: 1px
            );
            right: @gallery-control-next-position-right;
        }
    }

    .product.photo.main {
        position: absolute;
        top: @gallery-close-height + @gallery-close-position-top;
        left: @gallery-control-width + @gallery-control-prev-position-left;
        right: @gallery-control-width + @gallery-control-next-position-right;
        bottom: 130px;
        margin: @gallery-main-img-margin-top @gallery-main-img-margin-right @gallery-main-img-margin-bottom @gallery-main-img-margin-left;
        &:before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 1;
        }
    }

    .product.photo.thumbs {
        width: 95%;
        padding: @gallery-thumbnails-padding;
        background: @page-bg-color;
        position: absolute;
        bottom:0;
        .box-sizing();
        ul {
            .list-reset-styles();
            white-space: nowrap;
            position: relative;
            vertical-align: top;
            overflow: auto;
        }
        .item.thumb {
            display: inline-block;
            margin: 0 0 0 @gallery-thumb-margin-left;
            line-height: 1;
            &:first-child {
                margin-left: 0;

            }
            img {
                border: none;
                position: static;
            }
        }
        a {
            border: @gallery-thumb-border-width solid transparent;
            display: block;
            outline: none;
            &.active {
                border-color: @gallery-thumb-border-color-active;
            }
        }
    }
}

@import "../css/source/lib/responsive.less";
